<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="css/css.css" type="text/css" rel="stylesheet">
    <link href="css/page4.css" type="text/css" rel="stylesheet">
    <script src="js/vue.global.js"></script>
    <script src="js/rem.js"></script>
    <script src="js/misc.js"></script>
    <script src="js/popup-view.js"></script>
    <link href="css/pdfh5.css" type="text/css" rel="stylesheet" />
    <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" class="main-content">
    <div class="title" style="margin-top: 0.7rem;">
        <img src="images/page4/title.png">
    </div>
    <div class="desc desc1" style="width: 18.44rem;">
        <img src="images/page4/desc1.png">
    </div>
    <div class="desc desc2" style="width: 9.2rem; margin-top: 0.3rem;">
        <img src="images/page4/desc2.png">
    </div>
    <div class="block-view desc3" style="width: 19.18rem;">
        <img src="images/page4/table.png">
    </div>
    <div class="bottom-bar">
        <div class="button" @click="contentPopup.show=true;contentPopup.content=1;contentPopup.table.content=1">
            <img src="images/page4/button1.png">
        </div>
        <div class="button" @click="contentPopup.show=true;contentPopup.content=2;">
            <img src="images/page4/button2.png">
        </div>
        <div class="subtitle">
            <img src="images/page4/desc3.png">
        </div>
    </div>
    <div class="docker">
        <div class="docker__button-group">
            <a class="button" id="button-home">
                <img src="images/docker-btn-catalogue.png">
            </a>
            <div class="button" @click="refPopup.show=true;refPopup.content=1">
                <img src="images/docker-btn-ref.png">
            </div>
            <div id="button-guide" class="button" @click="refPopup.show=true;refPopup.content=2">
                <img src="images/docker-btn-pi.png">
            </div>
        </div>
        <div style="flex: 0.5;"></div>
        <a class="logo" >
            <img src="images/logo2.png">
        </a>
    </div>
    <div class="popup center ref" :class="{ show: refPopup.show }">
        <div class="popup_mask" @click="refPopup.show=false"></div>
        <div class="popup_container">
            <div class="ref-frame">
                <div class="ref-head">
                    <div v-if="refPopup.content==1" class="ref-head__title" style="width: 1.805rem;">
                        <img src="images/ref-view-title.png">
                    </div>
                    <div v-if="refPopup.content==2" style="width: 8.785rem;" class="ref-head__title">
                        <img src="images/pi-title.png">
                    </div>
                    <div class="ref-head__close" @click="refPopup.show=false">
                        <img src="images/ref-view-close.png">
                    </div>
                </div>
                <div class="ref-content">
                    <div class="block-view" :style="{ width: refPopup.content==1?'17.27rem':'unset' }">
                        <img v-if="refPopup.content==1" src="images/page4/ref.png">
                        <img v-if="refPopup.content==1" src="images/page4/ref1.png" style="margin-top: 0.5rem">
                        <img v-if="refPopup.content==2" src="images/pi-img.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="popup center content-popup" :class="{ show: contentPopup.show }">
        <div class="popup_mask" @click="contentPopup.show=false"></div>
        <div class="popup_container flex-view">
            <div class="popup_container__close" @click="contentPopup.show=false">
                <img src="images/ref-view-close2.png">
            </div>
            <div v-if="contentPopup.content==1" class="popup_container__title" style="width: 14.025rem;align-self: flex-start;margin-top: 0.5rem;margin-left: 0.5rem;">
                <img src="images/page4/popup-title1.png">
            </div>
            <div v-if="contentPopup.content==2" class="popup_container__title" style="width: 3.83rem;align-self: flex-start;margin-top: 0.5rem;margin-left: 0.5rem;">
                <img src="images/page4/popup-title2.png">
            </div>
            <div v-if="contentPopup.content==1" class="popup_container__table" style="width: 17.945rem;">
                <div v-if="contentPopup.table.content==1||contentPopup.table.content==2" class="block-view" style="width: 2.705rem;margin-left: 0.2rem;">
                    <img src="images/page4/title2.png">
                </div>
                <div class="popup_container__table-head" style="width: 10rem; transform: translateX(1.8%);">
                    <div class="table-head" @click="contentPopup.table.content=1">
                        <img v-if="contentPopup.table.content==1" src="images/page4/popup-table1_head_h.png">
                        <img v-else src="images/page4/popup-table1_head.png">
                    </div>
                    <div class="table-head" @click="contentPopup.table.content=2">
                        <img v-if="contentPopup.table.content==2" src="images/page4/popup-table2_head_h.png">
                        <img v-else src="images/page4/popup-table2_head.png">
                    </div>
                    <div class="table-head" @click="contentPopup.table.content=3">
                        <img v-if="contentPopup.table.content==3" src="images/page4/popup-table3_head_h.png">
                        <img v-else src="images/page4/popup-table3_head.png">
                    </div>
                    <div class="table-head" @click="contentPopup.table.content=4">
                        <img v-if="contentPopup.table.content==4" src="images/page4/popup-table4_head_h.png">
                        <img v-else src="images/page4/popup-table4_head.png">
                    </div>
                </div>
                <div v-if="contentPopup.table.content==1" class="opup_container__table-content table table1">
                    <img src="images/page4/popup-table1.png">
                    <div class="popup_container__table-frame column-view">
                        <div class="column" :style="{ width: contentPopup.table.columns[0] }">
                            <img style="width: 11.29rem;" src="images/page4/line1.png">
                        </div>
                        <div class="column" :style="{ width: contentPopup.table.columns[1] }">
                            <img style="width: 11.29rem;" src="images/page4/line2.png">
                        </div>
                        <div class="column tip1">
                            <img src="images/page4/line1-tip.png">
                        </div>
                    </div>
                    <div class="block-view" style="width: 14.455rem;">
                        <img src="images/page4/txt1.png">
                    </div>
                </div>
                <div v-if="contentPopup.table.content==2" class="opup_container__table-content table">
                    <img src="images/page4/popup-table2.png">
                    <div class="popup_container__table-frame column-view">
                        <div class="column" :style="{ width: contentPopup.table.columns[2] }">
                            <img style="width: 11.21rem;" src="images/page4/line3.png">
                        </div>
                        <div class="column" :style="{ width: contentPopup.table.columns[3] }">
                            <img style="width: 11.21rem;" src="images/page4/line4.png">
                        </div>
                        <div class="column tip2">
                            <img src="images/page4/line2-tip.png">
                        </div>
                    </div>
                    <div class="block-view" style="width: 14.905rem;">
                        <img src="images/page4/txt2.png">
                    </div>
                </div>
                <div v-if="contentPopup.table.content==3" class="opup_container__table-content table">
                    <img src="images/page4/popup-table3.png">
                    <div class="popup_container__table-frame column-view">
                        <div class="column" :style="{ width: contentPopup.table.columns[4] }">
                            <img style="width: 11.305rem;" src="images/page4/line5.png">
                        </div>
                        <div class="column" :style="{ width: contentPopup.table.columns[5] }">
                            <img style="width: 11.305rem;" src="images/page4/line6.png">
                        </div>
                        <div class="column tip3">
                            <img src="images/page4/line3-tip.png">
                        </div>
                    </div>
                    <div class="block-view" style="width: 15.355rem;">
                        <img src="images/page4/txt3.png">
                    </div>
                </div>
                <div v-if="contentPopup.table.content==4" class="opup_container__table-content">
                    <img src="images/page4/popup-table4.png">
                    <div class="block-view" style="width: 17.195rem;">
                        <img src="images/page4/txt4.png">
                    </div>
                </div>
            </div>
            <div v-if="contentPopup.content==2" class="popup_container__table table" style="width: 17.19rem">
                <img src="images/page4/popup-table5.png">
                <img src="images/page4/popup-bg2.png" style="width: 3.655rem; position: absolute; right: 0; bottom: 0;">
            </div>
        </div>
    </div>
    <div class="popup center pdf" :class="{ show: pdfPopup.show }">
        <div class="popup_mask" @click="pdfPopup.show=false"></div>
        <div class="ref-head__close" @click="pdfPopup.show=false">
            <img src="images/ref-view-close.png">
        </div>
        <div class="popup_container">
            <div class="ref-frame">
                <div id="pdf"></div>
            </div>
        </div>
    </div>
</div>
<div class="txt">
    <img src="images/txt.png">
</div>
<script>
    const { createApp } = Vue;
    const App = createApp({
        data() {
            return {
                pdfPopup: {
                    show: false,
                    pdfh5: null
                },
                refPopup: {
                    show: false,
                    content: 1
                },
                contentPopup: {
                    show: false,
                    table: {
                        content: 0,
                        columns: [0,0,0,0,0,0]
                    },
                    content: 0
                },
                guidePopup: {
                    show: false
                }
            }
        },
        mounted() {
        },
        watch: {
            'contentPopup.show': function (val) {
                if (!val) {
                    this.contentPopup.table.columns[0] = "0%";
                    this.contentPopup.table.columns[1] = "0%";
                    this.contentPopup.table.columns[2] = "0%";
                    this.contentPopup.table.columns[3] = "0%";
                    this.contentPopup.table.columns[4] = "0%";
                    this.contentPopup.table.columns[5] = "0%";
                }
            },
            'contentPopup.table.content': function (val) {
                console.log("contentPopup.table.content", val)
                switch (val) {
                    case 1:{
                        this.contentPopup.table.columns[2] = "0%";
                        this.contentPopup.table.columns[3] = "0%";
                        this.contentPopup.table.columns[4] = "0%";
                        this.contentPopup.table.columns[5] = "0%";

                        let i=0;
                        let interval = setInterval(() => {
                            this.contentPopup.table.columns[i] = "100%";
                            i++;

                            if (i>1) {
                                clearInterval(interval);
                            }
                        }, 600)

                        break;
                    }
                    case 2:{
                        this.contentPopup.table.columns[0] = "0%";
                        this.contentPopup.table.columns[1] = "0%";
                        this.contentPopup.table.columns[4] = "0%";
                        this.contentPopup.table.columns[5] = "0%";

                        let i=2;
                        let interval = setInterval(() => {
                            this.contentPopup.table.columns[i] = "100%";
                            i++;

                            if (i>3) {
                                clearInterval(interval);
                            }
                        }, 600)
                        break;
                    }
                    case 3:{
                        this.contentPopup.table.columns[0] = "0%";
                        this.contentPopup.table.columns[1] = "0%";
                        this.contentPopup.table.columns[2] = "0%";
                        this.contentPopup.table.columns[3] = "0%";

                        let i=4;
                        let interval = setInterval(() => {
                            this.contentPopup.table.columns[i] = "100%";
                            i++;

                            if (i>5) {
                                clearInterval(interval);
                            }
                        }, 600)

                        break;
                    }
                    case 4:{
                        this.contentPopup.table.columns[0] = "0%";
                        this.contentPopup.table.columns[1] = "0%";
                        this.contentPopup.table.columns[2] = "0%";
                        this.contentPopup.table.columns[3] = "0%";
                        this.contentPopup.table.columns[4] = "0%";
                        this.contentPopup.table.columns[5] = "0%";
                        break;
                    }
                }
            }
        },
        methods: {
            Toast(msg) {
                Toast(msg);
            },
            onOpenRPView() {
                if(this.pdfPopup.pdfh5==null) {
                    this.pdfPopup.pdfh5 = new Pdfh5('#pdf', {
                        pdfurl: "pi.pdf",
                        limit: 0
                    });
                } else {
                    this.pdfPopup.pdfh5.reset();
                }

                this.pdfPopup.show = true;
            }
        }
    }).mount('#app')
</script>
</body>
</html>
